<script>
import outMain from "@/components/outMain.vue";
import cropperHead from "@/components/public/cropperHead.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  Account,
  coinStatement,
  editEnterprise,
  getRecharge,
  payStatus,
  rechargeCoin,
  csPayMenu,
  csPay,
  positionPay,
  renewMain,
} from "@/http/api";
import $ from "jquery";

export default {
  components: { outMain, cropperHead },
  name: "",
  data() {
    return {
      timer: null,
      showErweima: false,
      showRenew: false,
      showWork: false,
      countMask: false,
      addWorkNum: 1,
      year_sum: 1,
      payInfo: {},
      comName: "",
      renewNumArr: [
        { label: "1年", value: 1 },
        { label: "2年", value: 2 },
        { label: "3年", value: 3 },
      ],
      talbeData: [],
      queryData: {
        page: 1,
        per_page: 20,
      },
      total: 0,
      payActive: {},
      packArr: [],
      resumeArr: [],
      resumeActive: {},
      formData: {},
      showEdit: false,
      payMask: false,
    };
  },
  props: {},
  setup() {},
  methods: {
    serchFn() {
      this.getCoinData();
    },
    getData() {
      Account().then((res) => {
        if (res.data.code == 1) {
          this.formData = res.data.data;
        }
      });
    },
    getCoverImg(src) {
      this.formData.enterprise_logo = src;
    },
    editAccount() {
      let data = {
        enterprise_logo: this.formData.enterprise_logo,
        enterprise_name: this.formData.enterprise_name,
        enterprise_english_name: this.formData.enterprise_english_name,
        enterprise_address: this.formData.enterprise_address,
      };
      editEnterprise(data).then((res) => {
        if (res.data.code == 1) {
          ElMessage({
            type: "success",
            message: "修改成功",
          });
          localStorage.setItem(
            "enterprise_name",
            this.formData.enterprise_name
          );
          localStorage.setItem(
            "enterprise_logo",
            this.formData.enterprise_logo
          );
          this.showEdit = false;
        }
      });
    },
    getCoinData() {
      coinStatement(this.queryData).then((res) => {
        if (res.data.code == 1) {
          this.talbeData = res.data.data.data;
          this.total = res.data.data.total;
        }
      });
    },
    payItemFn(item) {
      this.payActive = item;
    },
    countItemFn(item) {
      this.resumeActive = item;
    },
    paySureFn() {
      rechargeCoin(this.payActive).then((res) => {
        if (res.data.code == 1) {
          this.payMask = false;
          this.payInfo = res.data.data;
          this.showErweima = true;
          this.timer = setInterval(() => {
            this.checkPayStatus();
          }, 1000);
        }
      });
    },
    countSureFn() {
      csPay(this.resumeActive).then((res) => {
        if (res.data.code == 1) {
          this.countMask = false;
          ElMessage({
            type: "success",
            message: "购买成功",
          });
          this.getData();
        }
      });
    },
    checkPayStatus() {
      payStatus({ order_number: this.payInfo.order_number }).then((res) => {
        if (res.data.code == 1 && res.data.data === "success") {
          clearInterval(this.timer);
          this.showErweima = false;
          ElMessage({
            type: "success",
            message: "充值成功",
          });
          this.getData();
          this.getCoinData();
        }
      });
    },
    getPack() {
      getRecharge().then((res) => {
        if (res.data.code == 1) {
          this.packArr = res.data.data;
          this.payActive = this.packArr[0];
        }
      });
    },
    getResume() {
      csPayMenu().then((res) => {
        if (res.data.code == 1) {
          this.resumeArr = res.data.data;
          this.resumeActive = this.resumeArr[0];
        }
      });
    },
    sureRenew() {
      renewMain({ year_sum: this.year_sum }).then((res) => {
        if (res.data.code == 1) {
          ElMessage({
            type: "success",
            message: "续费成功",
          });
          this.showRenew = false;
          this.getData();
          this.getCoinData();
        }
      });
    },
    sureAddWork() {
      positionPay({ sum: this.addWorkNum }).then((res) => {
        if (res.data.code == 1) {
          ElMessage({
            type: "success",
            message: "购买成功",
          });
          this.showWork = false;
          this.getData();
          this.getCoinData();
        }
      });
    },
  },
  watch: {
    showErweima(value) {
      if (!value) {
        clearInterval(this.timer);
      }
    },
  },
  mounted() {},
  created() {
    this.getData();
    this.getCoinData();
    this.getPack();
    this.getResume(this);
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formHead">
        <div>账户中心</div>
        <btn value="返回上一级"></btn>
      </div>
      <div class="formMain">
        <div class="whiteBox">
          <div class="comHead">
            <div class="comImg">
              <img v-if="!showEdit" :src="formData.enterprise_logo" />

              <cropperHead
                v-if="formData.enterprise_logo && showEdit"
                :propImg="formData.enterprise_logo"
                @successCropper="getCoverImg"
              ></cropperHead>
            </div>
            <div class="comInfo">
              <div class="comName" v-if="!showEdit">
                <div class="comNameText">
                  {{ formData.enterprise_name }}
                </div>
                <el-tag
                  class="comNameTag"
                  type="success"
                  v-if="formData.enterprise_status == 1"
                  >正常</el-tag
                >
                <el-tag
                  class="comNameTag"
                  type="danger"
                  v-if="formData.enterprise_status == 2"
                  >禁用</el-tag
                >
                <el-tag
                  class="comNameTag"
                  type="info"
                  v-if="formData.enterprise_status == 3"
                  >已到期</el-tag
                >
              </div>
              <div class="inputItem" v-if="showEdit">
                <el-input
                  clearable
                  v-model="formData.enterprise_name"
                  style="width: 250px"
                  placeholder="请输入企业名称"
                />
              </div>
              <div class="inputItem" v-if="showEdit">
                <el-input
                  clearable
                  v-model="formData.enterprise_english_name"
                  style="width: 250px"
                  placeholder="请输入企业英文名称"
                />
              </div>
              <div class="inputItem" v-if="showEdit">
                <el-input
                  clearable
                  v-model="formData.enterprise_address"
                  style="width: 250px"
                  placeholder="请输入企业地址"
                />
              </div>
              <div
                class="comDes"
                v-if="
                  formData.enterprise_english_name &&
                  formData.enterprise_address &&
                  !showEdit
                "
              >
                <span
                  style="margin-right: 15px"
                  v-if="formData.enterprise_english_name"
                  >{{ formData.enterprise_english_name }}</span
                >
                <span v-if="formData.enterprise_address"
                  >企业地址：{{ formData.enterprise_address }}</span
                >
              </div>
              <div class="comDes" v-if="!showEdit">
                <div class="comDesItem">
                  企业发布岗位：<span class="desNum">{{
                    formData.sy_position_sum
                  }}</span>
                  <span class="linkText" @click="showWork = true"
                    >扩展岗位</span
                  >
                </div>
                <div class="comDesItem">
                  简历识别：<span class="desNum"
                    >{{ formData.resume_capture_sum }}次</span
                  >
                  <span class="linkText" @click="countMask = true"
                    >购买次数</span
                  >
                </div>
                <div class="comDesItem">
                  鲸币：<span class="desNum">{{ formData.jlh_coin }}</span
                  ><span class="linkText" @click="payMask = true"
                    >充值鲸币</span
                  >
                </div>
              </div>
              <div class="comTime" v-if="!showEdit">
                <div class="comTimeItem">
                  创建时间：{{ formData.create_time }}
                </div>
                <div class="comTimeItem">
                  到期时间：{{ formData.expiration_time }}
                </div>
                <span class="linkText" @click="showRenew = true">账户续期</span>
              </div>
            </div>
            <div class="ctrlBtn">
              <btnPlain
                v-if="!showEdit"
                value="编辑企业"
                @ok="showEdit = true"
              ></btnPlain>
              <btn v-if="showEdit" value="保存编辑" @ok="editAccount"></btn>
            </div>
          </div>
          <div class="stepCont">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">鲸币充值消费记录明细（{{ total }}）</div>
              <el-table
                class="tableMain"
                :data="talbeData"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="order_number"
                  width="
                  200"
                  show-overflow-tooltip
                  label="订单号"
                />
                <el-table-column
                  prop="coin"
                  width="100"
                  show-overflow-tooltip
                  label="充值/消费"
                >
                  <template #default="{ row }">
                    <span class="greenText" v-if="row.type == 1"
                      >+{{ row.coin }}</span
                    >
                    <span class="redText" v-if="row.type == 2"
                      >-{{ row.coin }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  width="100"
                  prop="change_coin"
                  show-overflow-tooltip
                  label="剩余鲸币"
                />
                <el-table-column width="100" show-overflow-tooltip label="类型">
                  <template #default="{ row }">
                    <div class="tagGroup">
                      <el-tag v-if="row.type === 1">充值</el-tag>
                      <el-tag type="danger" v-if="row.type === 2">消费</el-tag>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="msg"
                  show-overflow-tooltip
                  label="说明"
                />
                <el-table-column
                  width="200"
                  prop="pay_time"
                  show-overflow-tooltip
                  label="创建时间"
                />
              </el-table>
              <div class="pageCont">
                <el-pagination
                  v-model:currentPage="queryData.page"
                  v-model:page-size="queryData.per_page"
                  background
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  @size-change="serchFn"
                  @current-change="serchFn"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-dialog v-model="countMask" title="充值简历精准识别次数" width="600">
        <div class="payMaskCont">
          <div
            :class="
              resumeActive.c_sum == item.c_sum
                ? 'payItem payItemActive'
                : 'payItem'
            "
            @click="countItemFn(item)"
            :key="index"
            v-for="(item, index) in resumeArr"
          >
            <div class="c_sum">
              <span class="bigFont">{{ item.c_sum }}</span
              ><span>次</span>
            </div>
            <div class="payNum">鲸币{{ item.jb_sum }}</div>
          </div>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="countMask = false">取消</el-button>
            <el-button type="primary" @click="countSureFn">
              确认购买
            </el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog v-model="payMask" title="充值鲸币" width="600">
        <div class="payMaskCont">
          <div
            :class="
              payActive.c_sum == item.c_sum
                ? 'payItem payItemActive'
                : 'payItem'
            "
            @click="payItemFn(item)"
            :key="index"
            v-for="(item, index) in packArr"
          >
            <div class="c_num">
              <span class="bigFont">{{ item.c_sum }}</span
              ><span>鲸币</span>
            </div>
            <div class="payNum">¥{{ item.c_sum }}</div>
            <div class="s_num">多赠{{ item.s_sum }}鲸币</div>
          </div>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="payMask = false">取消</el-button>
            <el-button type="primary" @click="paySureFn"> 确认 </el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog v-model="showErweima" title="在线支付" width="400">
        <div class="payInfoCont">
          <div class="payMoneyText">
            ¥{{ payActive.c_sum }}(鲸币{{
              Number(payActive.c_sum) + Number(payActive.s_sum)
            }})
          </div>
          <div class="erweimaImg">
            <img :src="payInfo.payCode" />
          </div>
          <div class="orderNum">订单号：{{ payInfo.order_number }}</div>
          <div class="payTip">温馨提示：请使用微信支付</div>
        </div>
      </el-dialog>
      <el-dialog v-model="showWork" title="拓展岗位" width="500">
        <el-form>
          <el-form-item label-width="120" label="岗位数量">
            <el-input-number v-model="addWorkNum" :min="1" :max="100" />
          </el-form-item>
          <el-form-item label-width="120" label="所需鲸币">
            <div>{{ Number(formData.gwjg) * addWorkNum }} 鲸币</div>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showWork = false">取消</el-button>
            <el-button type="primary" @click="sureAddWork">
              确认购买
            </el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog v-model="showRenew" title="账号续费" width="500">
        <el-form>
          <el-form-item label-width="120" label="续费时间">
            <el-select v-model="year_sum" placeholder="请选择续费时间">
              <el-option
                v-for="item in renewNumArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label-width="120" label="所需鲸币">
            <div>
              {{ Number(formData.xf_enterprise_money) * year_sum }} 鲸币
            </div>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showRenew = false">取消</el-button>
            <el-button type="primary" @click="sureRenew"> 确认续费 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </outMain>
</template>
<style scoped lang="less">
.payMaskCont {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .payItem {
    width: 48%;
    border: 1px solid #4b58dc;
    background-color: #f6f7f9;
    border-radius: 5px;
    padding: 30px 15px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    cursor: pointer;
    transition: all 0.3s linear;
    margin-bottom: 20px;
    justify-content: space-between;
    color: #000;
    position: relative;
    overflow: hidden;
    .s_num {
      padding: 3px 10px;
      background-color: #4b58dc;
      color: #fff;
      position: absolute;
      right: -1px;
      top: -1px;
      border-radius: 0 0 0 5px;
      font-size: 10px;
      transition: all 0.3s linear;
    }
    .c_num {
      font-size: 12px;
      .bigFont {
        font-size: 22px;
        margin-right: 5px;
      }
    }
    .payNum {
      font-size: 18px;
    }
  }
  .payItemActive {
    background-color: #4b58dc;
    color: #fff;
    .s_num {
      background-color: #fff;
      color: #4b58dc;
    }
  }
}
</style>
